<template>
  <ul class="app-header-nav">
    <li class="home"><RouterLink to="/">首页</RouterLink></li>
    <li v-for="item in $store.state.category.list" :key="item.name">
      <!-- 这里需要使用routerLink来实现跳转，所以不需要a标签了
       -->
      <!-- 加载完成才让点，不然就不让点 -->
      <RouterLink active-class="active" v-if="item.id" :to="`/category/${item.id}`">{{ item.name }}</RouterLink>
      <!-- 这里a标签的href加了javascript就不能跳转了，加了#会跳转到# -->
      <a v-else href="javascript:;">{{ item.name }}</a>
    </li>
  </ul>
</template>
<script>
// 这是头部的顶部导航栏组件
// 1.渲染nav中的一级分类
// 1.1在API层定义接口函数
// 1.2在vuex的category模块，定义mutations函数和actions函数
// 1.3在layout组件调用actions，因为这里只调用一次就可以
// 1.4当前组件拿出vuex中的数据进行渲染
// 2.优化初始化午数据展示（局部白屏）
// 2.1定义9个分类的常量数据
// 2.2在vuex状态初始化的时候，使用常量数据(和后台数据结构一致)
// 2.3在没有加载数据的时候可以看到分类，没有加载完就不让跳转
export default {
  name: 'AppHeaderNav',
  setup() {
    // 在这里可以直接使用vuex里面的数据，如果很多地方使用到就可以使用计算属性降低js表达式的复杂程度
    return
  }
}
</script>

<style scoped lang="less">
.app-header-nav {
  width: 820px;
  display: flex;
  padding-left: 40px;
  position: relative;
  z-index: 998;
  li {
    margin-right: 40px;
    width: 38px;
    text-align: center;
    a {
      font-size: 16px;
      line-height: 32px;
      height: 32px;
      display: inline-block;
      &.active {
        color: var(--xtx-color);
        border-bottom: 1px solid var(--xtx-color);
      }
    }
    &:hover {
      a {
        color: var(--xtx-color);
        border-bottom: 1px solid var(--xtx-color);
      }
    }
  }
}
</style>
